<template>
  <!-- 联合巡检：巡检报告 -->
  <div class="inspection-report-h bigTableStyle">
    <div class="inspection-report-index">
      <div class="fromed">
        <div class="inspection-report-return">
          <div>
            <span class="icon"></span> 巡检报告
          </div>
          <div class="top-back" @click="goBack"></div>
        </div>
        <el-form
          class="filter-box"
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="1.2rem"
        >
          <el-row :gutter="15">
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="所属地市:" prop="time">
                    <el-select
                      v-model="formData.ssds"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in CompanyList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站名称:" prop>
                    <el-select
                      v-model="formData.bdzmc"
                      placeholder="请选择"
                      filterable
                      clearable
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in LocalCityList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="电压等级:" prop="source">
                    <el-select
                      v-model="formData.dydj"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in getDydjList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检类型:" prop="source">
                    <el-select
                      v-model="formData.xslx"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in getXslxList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检结果:" prop="time">
                    <el-select
                      v-model="formData.xsjg"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in getXsjgList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否确认:" prop>
                    <el-select
                      v-model="formData.sfqr"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in sfqrOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检时间:" prop="source">
                    <el-date-picker
                      v-model="plantime"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="3">
              <div class="inspection-report-index-btn">
                <el-button
                  class="table-query"
                  type="primary"
                  @click="search"
                  icon="el-icon-search"
                >查询</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom-border"></div>
      <div class="tableed">
        <el-table
          border
          v-loading="isShowLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          :data="tableData"
          height="100%"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%;"
        >
          <el-table-column prop="NUM" label="序号" width="80"></el-table-column>
          <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true" width="180"></el-table-column>
          <el-table-column prop="BDZMC" label="变电站" :show-overflow-tooltip="true" width="180"></el-table-column>
          <el-table-column prop="DYDJMC" label="电压等级" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XSLX" label="巡检类型" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{scope.row.XSLX | xjlx}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="XSKSSJ" label="巡检开始时间" :show-overflow-tooltip="true" width="200"></el-table-column>
          <el-table-column prop="XSJSSJ" label="巡检结束时间" :show-overflow-tooltip="true" width="200"></el-table-column>
          <!-- <el-table-column prop="ALLCOUNT" label="巡检点位数"></el-table-column>
          <el-table-column prop="YCCOUNT" label="异常点位数"></el-table-column>
          <el-table-column prop="YLCOUNT" label="漏检点位数"></el-table-column>-->
          <el-table-column prop="XSJG" label="巡检结果">
            <template slot-scope="scope">
              <div>{{scope.row.XSJG | xsjg}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="SFQR" label="是否确认">
            <template slot-scope="scope">
              <div>{{scope.row.SFQR | sfqr}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="USERNAME" label="确认人" :show-overflow-tooltip="true" width="180"></el-table-column>
          <el-table-column prop="STATUS" label="计划状态">
            <template slot-scope="scope">
              <div>{{scope.row.STATUS | jhzt}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="信息总览">
            <template slot-scope="scope">
              <i class="el-icon-s-order iconfonts" @click="PopUp(scope.row)"></i>
            </template>
          </el-table-column>-->
          <el-table-column label="报告">
            <template slot-scope="scope">
              <div class="iconfont iconbaogao" @click="handleEdit(scope.row)"></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.rows"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="Manipulation.BDZMC+'巡视报告'"
      top="5vh"
      :visible.sync="dialogVisible"
      width="92%"
      :before-close="handleClose"
    >
      <report
        v-if="dialogVisible"
        @closeHandel="closeHandel"
        @AlarmPush="AlarmPush"
        :Manipulation="Manipulation"
      />
    </el-dialog>
    <el-dialog
      :title="Manipulation.BDZMC+'信息总览'"
      :visible.sync="dialogVisible2"
      width="13rem"
      :before-close="handleClose"
    >
      <SubstationDetailsPopUp
        v-if="dialogVisible2"
        :Manipulation="Manipulation"
        @closexxzl="closexxzl"
      />
    </el-dialog>
    <el-dialog
      :title="'推送数据'"
      :visible.sync="dialogVisible3"
      width="90%"
      :before-close="handleClose3"
    >
      <reportPush v-if="dialogVisible3" @handleClose3="handleClose3" :Manipulation="paramsData" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import report from "./report.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import SubstationDetailsPopUp from "./SubstationDetailsPopUp.vue";
import reportPush from "../InspectionMonitor/report.vue";
import todate from "@/utils/date";
import time from "@/utils/time.js";
@Component({
  components: { report, SubstationDetailsPopUp, reportPush },
  filters: {
    xsjg: (value: any) => {
      switch (value) {
        case "0":
          value = "异常";
          break;
        case "1":
          value = "正常";
          break;
        default:
          value = "";
          break;
      }
      return value;
    },
    xjlx: (value: any) => {
      switch (value) {
        case "1":
          value = "例行巡检";
          break;
        case "2":
          value = "自定义巡检";
          break;
        case "3":
          value = "专项巡检";
          break;
        case "4":
          value = "熄灯巡检";
          break;
        case "5":
          value = "特巡巡检";
          break;
        default:
          value = "";
          break;
      }
      return value;
    },
    jhzt: (value: any) => {
      switch (value) {
        case "1":
          value = "未执行";
          break;
        case "2":
          value = "已执行";
          break;
        default:
          value = "";
          break;
      }
      return value;
    },
    sfqr: (value: any) => {
      switch (value) {
        case "0":
          value = "未确认";
          break;
        case "1":
          value = "已确认";
          break;
        default:
          value = "未确认";
          break;
      }
      return value;
    },
  },
})
export default class inspectionReportIndex extends Vue {
  goBack() {
    window.history.back();
  }
  //表格加载状态
  isShowLoading = true;
  //搜索框from表单数据
  formData: any = {
    ssds: "",
    bdzmc: "",
    dydj: "",
    xslx: "",
    xsjg: "",
    sfqr: "",
  };
  plantime: any = [];

  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  sfqrOptions = [
    {
      interval: "全部",
      id: "",
    },
    {
      interval: "未确认",
      id: "0",
    },
    {
      interval: "已确认",
      id: "1",
    },
  ];
  //一行数据
  Manipulation: any = {};
  $refs!: {
    elForm: any;
  };
  get CompanyList() {
    return JointInspectionModule.CompanyList;
  }
  get LocalCityList() {
    return JointInspectionModule.LocalCityList;
  }
  get getDydjList() {
    return JointInspectionModule.getDydjList;
  }
  get getXslxList() {
    return JointInspectionModule.getXslxList;
  }
  // get getXsjgList() {
  //   return JointInspectionModule.getXsjgList;
  // }
  getXsjgList = [
    { name: "全部", code: "" },
    { name: "异常", code: "0" },
    { name: "正常", code: "1" },
  ];

  resetForm() {
    this.$refs.elForm.resetFields();
  }

  //table表格相关事件数据
  tableData = [];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  handleEdit(row: any) {
    console.log(row);

    this.Manipulation = row;
    // console.log(this.Manipulation.BDZMC);
    this.dialogVisible = true;
  }

  //分页数据事件相关
  pages = {
    rows: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.rows = val;
    this.init();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
    this.pages.page = val;
    this.init();
  }

  //弹窗相关
  dialogVisible = false;
  dialogVisible2 = false;
  dialogVisible3 = false;
  handleClose() {
    this.dialogVisible = false;
    this.dialogVisible2 = false;
  }
  //告警推送
  paramsData = {};
  AlarmPush(val) {
    this.dialogVisible = false;
    this.paramsData = val;
    console.log(this.paramsData);

    setTimeout(() => {
      this.dialogVisible3 = true;
    }, 400);
  }
  handleClose3() {
    this.dialogVisible3 = false;
    console.log(this.paramsData);

    setTimeout(() => {
      this.dialogVisible = true;
    }, 400);
  }
  //表格信息总览 弹框
  PopUp(row: any) {
    this.Manipulation = row;
    this.dialogVisible2 = true;
  }
  //关闭表格报告 弹框
  closeHandel() {
    this.dialogVisible = false;
    this.init();
  }
  //关闭 信息总览 弹框
  closexxzl() {
    this.dialogVisible2 = false;
    this.init();
  }
  search() {
    this.pages.page = 1;
    this.init();
  }
  init() {
    Vue.set(this.formData, "page", this.pages.page);
    Vue.set(this.formData, "rows", this.pages.rows);

    if (this.plantime) {
      Vue.set(this.formData, "xskssjpre", this.plantime[0]);
      if (this.plantime[1]) {
        // Vue.set(this.formData, "xskssjpos", this.plantime[1]);
        Vue.set(this.formData, "xskssjpos", this.plantime[1] + " 23:59:59");
      } else {
        Vue.set(this.formData, "xskssjpos", this.plantime[1]);
      }
    } else {
      this.plantime = ["", ""];
      Vue.set(this.formData, "xskssjpre", this.plantime[0]);
      if (this.plantime[1]) {
        Vue.set(this.formData, "xskssjpos", this.plantime[1] + " 23:59:59");
        // Vue.set(this.formData, "xskssjpos", this.plantime[1]);
      } else {
        Vue.set(this.formData, "xskssjpos", this.plantime[1]);
      }
    }

    (this as any).$services
      .xsbgDetail({ data: this.formData })
      .then((result: any) => {
        this.isShowLoading = false;

        if (result.data) {
          this.tableData = result.data.rows;
          this.pages.totalSize = result.data.total;
        }
      })
      .catch((err: object) => {
        this.isShowLoading = false;
        console.log(err);
      });
  }
  // 默认一周时间
  getWeekTime() {
    let startDate = time(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).slice(
      0,
      10
    );
    let endDate = time(new Date()).slice(0, 10);
    this.plantime = [startDate, endDate];
  }
  mounted() {
    console.log(this.$route.query);

    this.getWeekTime();
    if (this.$route.query.xjbg) {
      this.formData.sfqr = this.$route.query.xjbg;
    }
    if (this.$route.query.state) {
      this.formData.xsjg = this.$route.query.state;
    }
    if (this.$route.query.startTime || this.$route.query.startTime === "") {
      this.plantime[0] = this.$route.query.startTime;
    }
    if (this.$route.query.endTime || this.$route.query.endTime === "") {
      this.plantime[1] = this.$route.query.endTime;
    }
    console.log(this.plantime);

    this.init();
  }
}
</script>

<style lang="scss" scoped>
.inspection-report-h {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .inspection-report-index {
    width: 100%;
    height: 100%;
    &-btn {
      display: flex;
      justify-content: flex-end;
    }
    .fromed {
      // height: 160px;
      .inspection-report-return {
        height: 0.3rem;
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          font-size: 0.18rem;
        }
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
        }
      }
      .filter-box {
        height: 1.04rem;
        width: 100%;
        margin-top: 0.15rem;
      }
    }
    .bottom-border {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(30, 60, 166, 1),
        rgba(255, 255, 255, 1),
        rgba(32, 62, 168, 1)
      );
      margin: 0.1rem 0;
    }
    .tableed {
      height: calc(100% - 2.64rem);
    }
    .paged {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .iconfont,
  .iconfonts {
    cursor: pointer;
  }
}
</style>
<style lang="scss" >
.bigTableStyle {
  .table-query {
    width: 1.6rem;
  }
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.8);
  }
  // .el-loading-spinner .el-loading-text,
  // .el-loading-spinner .path {
  //   // color: #fff;
  //   // stroke: #fff;
  // }
}
</style>



